
<style type="text/css">
	.buttonEnabled{}
	.buttonShield{}
</style>

<div class="container">
	<div class="page-header">
		<h1>Language Manager</h1>
	</div>
	<div class="panel panel-default">
		<div class="panel-body">
			<form class="form-inline" method="post" id="language_search_form">
				<div class="form-group my-form-row">
					<div class="form-group my-form-group" style="width: 48%;">
						<label for="formLanCode" style="">键值:</label> 
						<input type="text"
							class="form-control" style="width: 78%;"
							placeholder="language code" id="formLanCode">
					</div>

					<div class="form-group my-form-group" style="width: 48%;">
						<label for="formLanValue" style="width: 18%; text-align: right;">内容:</label>
						<input type="text" class="form-control" style="width: 78%;"
							placeholder="language Value" id="formLanValue">
					</div>
				</div>

				<div class="form-group my-form-row">
					<div class="form-group my-form-group" style="width: 48%;">
						<label for="formRemarks" style="">备注:</label> <input type="text"
							class="form-control" style="width: 78%;"
							placeholder="remarks" id="formRemarks">
					</div>

					<div class="form-group my-form-group" style="width: 48%;">
						<label for="formLanType" style="width: 18%; text-align: right;">语言:</label>
					        <select class="form-control" style="width: 78%;" id="formLanType" name="lanType">
					            <option value="1">中文</option>
					            <option value="2">英文</option>
					            <option value="3">韩语</option>
					            <option value="4">法语</option>
					            <option value="5">俄语</option>
					        </select>
					</div>
				</div>

				<div class="form-group my-form-row" style="height: 38px;">
					<label for="startdate" style="width: 108px; text-align: right;">创建时间:</label>
					<input type="text" style="width: 38%;" class="easyui-datebox form-control"
						id="startdate" name="startdate"
						data-options="prompt:'请选择开始日期',editable:false,required:'true',onSelect:onSelect">
					<span style="width: 58px; text-align: center;margin:0 28px;">&nbsp; <i
						class="fa fa-chevron-right" aria-hidden="true"></i> <span
						class="sr-only">TO</span>
					</span> 
						<input type="text" style="width: 38%;margin-left:58px;" class="easyui-datebox form-control"
						id="enddate" name="enddate"
						data-options="prompt:'请选择结束日期',editable:false,required:'true',disabled:true,validType:'equaldDate[\'#startdate\']'">
				</div>

				<div
					class="form-group my-form-group form-search-btn-group my-form-row"
					style="text-align: center;">
					<button type="submit" class="btn btn-success">
						<i class="fa fa-search"></i> Search
					</button>
					<button type="submit" class="btn btn-success">
						<i class="fa fa-undo"></i> Reset
					</button>
				</div>
			</form>
		</div>
	</div>
	<div title="国际化">
			<div style="margin: 6px;">
				<a href="javascript:void(0)"
					class="btn btn-primary actionbtn"
					 id="language_create"><i class="fa fa-plus"></i>
					Add Item</a> 
				<a href="javascript:void(0)" id="language_modal_submit"
					class="btn btn-primary actionbtn l-btn-disabled"
					><i
					class="fa fa-save fa-trash-o fa-lg"></i> Save</a> 
				<a href="javascript:void(0)" id="language_remove"
					class="btn btn-primary optionbtn l-btn-disabled"
					><i
					class="fa fa-remove fa-trash-o fa-lg"></i> Remove</a>

				<div class="btn-group formbtn">
					<a href="javascript:;" class="btn btn-primary actionbtn"><i
						class="fa fa-file-excel-o"></i> Export and Import</a> <a
						href="javascript:;" data-toggle="dropdown"
						class="btn btn-primary dropdown-toggle" aria-expanded="false">
						<span class="fa fa-caret-down"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="javascript:;" onclick="exportExcel()"><i class="i"></i> 导出Excel</a></li>
						<li><a href="javascript:;" onclick="downloadTemplate()"><i class="i"></i> 下载Excel模板</a></li>
						<li class="divider"></li>
						<li><a href="javascript:;"onclick="importExcel()"><i class="i"></i> 导入Excel</a></li>
					</ul>
				</div>
			</div>
			
			<!-- 列表布局 -->
			<div id="language_list">
				
			</div>
		</div>
</div>

<div class="modal" id="language_modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary"
					id="language_modal_submit">
					<i class="fa fa-save"></i> Save
				</button>
			</div>
		</div>
	</div>
</div>

<script type="text/x-handlebars-template" id="language_table_template">
	
    <table class="table table-hover row-table" id="language_table">
    	<thead>
        	<th>
    			<th>operate</th>
    			<th>Item Code <span class="required">*</span></th>
				<th>Value <span class="required">*</span></th>
				<th>Language <span class="required">*</span></th>
				<th>remarks</th>
				<th>Create User</th>
				<th>Create Date</th>
				<th>Update User</th>
				<th>Update Date</th>
			</th>
		</thead>
        <tbody>
			{{#if data}}
			{{#data}}
            {{> tr}}
            {{/data}}
			{{else}}
        		<div class="alert alert-warning">Can not find any data!</div>
    		{{/if}}
        </tbody>
		<tfoot>
			<th colspan="5">
				<span>1</span>
				<span>...</span>
				<span>12</span>
				<span>13</span>
				<span>14</span>
				<span>15</span>
				<span>16</span>
				<span>...</span>
				<span>116</span>
				<span>&nbsp;</span>
				<span>{{totalRows}}</span>
				<span>/</span>
				<span>{{totalPage}}</span>
			</th>
			<th colspan="5">&nbsp;</th>
		</tfoot>
	</table>
</script>

<script type="text/x-handlebars-template-partial"
	id="language_table_tr_template">
	<tr data-id="{{lanId}}" data-name="{{lanId}}" group="{{lanCode}}" class="h_grid_tr" index="{{@index}}">
		<td>
		<label class="checkbox-inline">
        	<input type="checkbox" id="lanId" name="lanId" value="{{lanId}}" onclick="validateRemoveBtn()">
    	</label>
		</td>
		<td>
			<button class="btn btn-xs btn-primary language_edit" title="Edit"><i class="fa fa-edit"></i></button>
		</td>
		<td rowspan="1" class="rowspan" group="{{lanCode}}" id="rowspan_{{lanId}}">
			{{lanCode}}
		</td>
		<td>
			{{lanValue}}
		</td>
		<td>
			<input type="hidden" id="lanType" value="{{lanType}}" class="form-control">
			{{lanTypeLab}}
		</td>
		<td>
			{{remarks}}
		</td>
		<td>{{nameCn}}</td>
		<td>{{createdDate}}</td>
		<td>{{lastNameCn}}</td>
		<td>{{updateLastDate}}</td>
	</tr>
</script>

<script type="text/x-handlebars-template"
	id="language_modal_form_template">
	<tr data-id="{{lanId}}" data-name="{{lanId}}" class="h_grid_tr template">
		<td>{{index}}</td>
		<td><input type="hidden" name="lanId" id="lanId" value="{{lanId}}"></td>
		<td rowspan="1" class="{{lanCode}}" id="rowspan#{{lanId}}">
			<input type="text" value="{{lanCode}}" id="lanCode" class="form-control">
		</td>
		<td>
			<input type="text" value="{{lanValue}}" id="lanValue" class="form-control">
		</td>
		<td>
			<select name="lanType" id="lanType">
    			<option value="1" code="CN">中文</option>
    			<option value="2" code="EN">英文</option>
    			<option value="3" code="FN">法文</option>
  			</select>
		</td>
		<td>
			<input type="text" value="{{remarks}}" id="remarks" class="form-control">
		</td>
		<td>{{createdUser}}</td>
		<td>{{createdDate}}</td>
		<td>{{updateLastUser}}</td>
		<td>{{updateLastDate}}</td>
	</tr>
</script>

<script src="../resources/utils/formatDate.js"></script>
<script src="js/global.js"></script>
<script src="js/ExcelView.js"></script>
<script src="js/ExcelService.js"></script>

<script>
	
	function onSelect(date) { //开始日期选择时触发
		$('#enddate').datebox('enable'); //启用结束日期控件
		$('#enddate').datebox('reset') //重置结束日期的值
	};
	$.extend($.fn.validatebox.defaults.rules, {
		equaldDate : {
			validator : function(value, param) {
				var d1 = $(param[0]).datetimebox('getValue'); //获取开始时间
				return value >= d1; //有效范围为大于开始时间的日期
			},
			message : '结束日期不能早于开始日期!'
		}
	})
	var validateRemoveBtn = function(){
		var checkNum = $('input:checkbox[name=lanId]:checked').length;
		if(checkNum>0){
			$(".optionbtn").removeClass("l-btn-disabled");
		}else{
			$(".optionbtn").addClass("l-btn-disabled");
		}
	}
	$(function() {
		
		$('#Language_tt').tabs({
			plain : true
		})
		
		/**统计分组行数*/
		var countGroupTrNumber = function(code){
			var trArr = $('.h_grid_tr');
			//app.global.button.label.save
			var count = 0;
			for(var i=0;i<trArr.length;i++){
				var tr = $(trArr[i]);
				var tcode = $(tr).attr('group');
				if(code==tcode){
					count += 1;
				}
			}
			return count;
		}
		
		/**将tr分组,rowspan*/
		doExecuteRowspan = function(){
			var trArr = $('.h_grid_tr');
			var groupCode = '';
			//第一次找出所有lanCode做为分组依据
			for(var i=0;i<trArr.length;i++){
				var tr = $(trArr[i]);
				//console.warn(i,$(tr));
				var tds = $(tr).find('td.rowspan');
				var groupNum = 0;
				//不等于代表有新的组名
				if(groupCode != tds.attr('group')){
					//重新赋值
					groupCode = tds.attr('group');
					//查找此组共多少行需要合并
					groupNum = countGroupTrNumber(groupCode);
					//第一行就改rowspan的属性
					tds.attr('rowspan',groupNum);
				}else{
					//删除此td
					//console.info($(tds))
					$(tds).detach();
				}
				//console.info('rowspan',tds.attr('group'));
			}
		}
		
		// 显示所有产品
		//$('body').hide(); // 隐藏界面
		LanguageService.findLanguages(function() {
			doExecuteRowspan();
			$('body').show(); // 显示界面
		});
		
		var language = {
			index : 0,
			lanId : 0,
			lanCode : "",
			lanValue : "",
			remarks : "",
			lanType : '1',
			createdUser : '10001',
			createdDate : getFormatDateByLong(null, "yyyy-MM-dd"),
			updateLastUser : '10001',
			updateLastDate : getFormatDateByLong(null, "yyyy-MM-dd")
		};
		
		// 点击 Create 按钮，弹出创建产品对话框
		$('#language_create').on('click', function() {
			var title = 'Create Language';
			LanguageView.insertLanguageRow(language);

			$(".actionbtn").toggleClass("l-btn-disabled");
		});
		
		// 根据关键字查询产品
		$('#language_search_form').on('submit', function() {
			var keyword = $('#keyword').val().trim();
			LanguageService.findLanguagesByName(keyword);
			return false;
		});
		
		$(document).on('click', '#language_table .language_edit', function() {
        	var $tr = $(this).closest('tr');
        	var itemId = $tr.data('id');
        	language = LanguageService.findLanguageByItem(itemId);
        	//editRowspan(itemId);//编辑一下rowspan属性
            //$('#language_modal').modal('show');
			LanguageView.deleteLanguageRow(itemId);
            LanguageView.insertLanguageRow(language.obj);
            doExecuteRowspan();
			$(".actionbtn").toggleClass("l-btn-disabled");

            return false;
        });

		// 点击 Delete 按钮，删除产品
		$(document).on('click','#language_remove',function() {
			var chkValues =[];
			$('input[name="lanId"]:checked').each(function(){
				var item = {lanId:$(this).val()}
				chkValues.push(item);
			});
			if(chkValues.length<1){
				//
				return;
			}
			if (confirm('Do you want to delete this language?')) {
				LanguageService.deleteLanguageRows(chkValues);
				doExecuteRowspan();
			}
			return false;
		});

		// 点击对话框中的 Save 按钮，创建或更新产品
		$('#language_modal_submit').on('click', function() {
			var idNode = $('#lanId');
			var id = $(idNode).val();
			console.warn($('#lanValue'));
			console.warn($('#lanValue').val());
			var language = {
					lanId : id,
					lanCode : $('#lanCode').val().trim(),
					lanValue : $('#lanValue').val().trim(),
					lanType : $('#lanType').val().trim(),
					remarks : $('#remarks').val().trim()
				};
			$(".actionbtn").toggleClass("l-btn-disabled");
			console.warn('language',language);
			if (id == 0) {
				LanguageService.batchInsertLanguage([language],doExecuteRowspan);
			} else {
				LanguageService.batchUpdateLanguage(language);
			}
			$("tr.template").detach();
			//LanguageView.deleteLanguageRow(id);
			doExecuteRowspan();

		});
		//
	});
</script>

<style type="text/css">

.editCur{background:#DDD;color:#FFF;}
.h_grid_tr td{line-height: 100%;vertical-align:middle;/*设置垂直居中*/}

.row-table {
	background: #666;
}

.row-table tr th {
	background: #F1F2F8;
	height: 36px;
	color: #666;
	font-weight: bold;
	text-indent: 6px;
}

.row-table tbody tr td {
	background: #FFF;
	text-indent: 6px;
	vertical-align:middle;/*设置垂直居中*/
}

.required {
	color: #F00;
}

.row-table table, .row-table td {
	margin: 0;
	padding: 0;
	vertical-align: middle;
	text-align: left;
	vertical-align:middle;/*设置垂直居中*/
}

.row-table tbody {
	border-top: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-right: 1px solid #DDD;
}

.row-table tbody td {
	background-color: #DFC;
	border-bottom: 1px solid #DDD;
	border-right: 1px solid #DDD;
	padding: 9px;
	vertical-align:middle;/*设置垂直居中*/
}

.row-table td {
	font-weight: bold;
	padding: 4px 8px 6px 9px;
	text-align: center;
	vertical-align:middle;/*设置垂直居中*/
}

.row-table thead th {
	font-size: 14px;
	font-weight: bold;
	line-height: 19px;
	padding: 0 8px 2px;
	text-align: center;
}

.tabs-title {
	width: 138px;
}
.row-table tfoot{
	background-color: #DDD;
	border-bottom: 1px solid #DDD;
	border-right: 1px solid #DDD;
	padding: 9px;
	vertical-align:middle;/*设置垂直居中*/
}
.row-table tfoot td {
	background-color: #DDD;
	border: 1px d #DDD;
	padding: 9px;
	vertical-align:middle;/*设置垂直居中*/
}

.row-table tfoot span{
	width:3em;height:1em;padding:3px;background:#FFF;
}
</style>
